import React,{Component} from 'react'
import {createStackNavigator,createAppContainer,createBottomTabNavigator} from 'react-navigation';
import { default as CustomTabbar } from '../components/CustomTabbar'
import {Root,StyleProvider } from 'native-base'
import getTheme from '../../native-base-theme/components';
import platform from '../../native-base-theme/variables/platform';
import HomePage from '../views/HomePage'
import HomeNative from '../views/HomeNative'
import WelcomePage from '../views/WelcomePage'
import BlueTest from '../views/BlueTest'
import LoginSreen from '../views/LoginScreen'
import Icon from 'react-native-vector-icons/FontAwesome5';
import Practice from '../views/Practice'
import Splash from '../views/Splash'
import GuildPage from '../views/GuildPage'
// import Icon from 'react-native-vector-icons/iconfont';


const tabNavigatorScreen = createBottomTabNavigator({
    WelcomePage:{
        screen:WelcomePage,
        navigationOptions:()=> {
            return {
                tabBarLabel: 'Welcome',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'star'} solid size={commonStyle.tabBarSize} color={tintColor} />
                        );
                    }
                    return (
                        <Icon name={'star'}  size={commonStyle.tabBarSize}/>
                    );
                },
            }
        }
    },
    HomeNative:{
        screen:HomeNative,
        navigationOptions:({navigations})=> {
            return {
                tabBarLabel: 'Home',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'microsoft'} size={40} color={tintColor}/>
                        );
                    }
                    return (
                        <Icon name={'robot'}  size={40} />
                    );
                },
            }
        }
    },
    BlueTest:{
        screen:BlueTest,
        navigationOptions:()=> {
            return {
                tabBarLabel: 'Blue',
                tabBarIcon: ({focused, tintColor}) => {
                    if (focused) {
                        return (
                            <Icon name={'bluetooth'} size={commonStyle.tabBarSize} color={tintColor}/>
                        );
                    }
                    return (
                        <Icon name={'bluetooth-b'}  size={commonStyle.tabBarSize}/>
                    );
                },
            }
        }
    }
},{
    nitialRouteName: 'WelcomePage',
    tabBarComponent:CustomTabbar,
    tabBarOptions: {
        activeTintColor: '#33A3F4',
        inactiveTintColor: '#949494',
        showIcon: true,
        labelStyle: {
            fontSize: ScreenUtil.setSpText2(12),
            marginTop: 0,
            marginBottom: 0,
        },
        style: {
            backgroundColor: 'white',
            paddingBottom: ScreenUtil.scaleHeight(5),
        },
        tabStyle: {
        }
    },
    tabBarPosition: 'bottom',
})

const  AppNavigator = createStackNavigator({
    // Splash:Splash,
    HomePage: {
        screen: tabNavigatorScreen,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "车载销售系统",
            headerStyle:{
                height:ScreenUtil.scaleHeight(30),
            },
            headerTitleStyle :{
                flex:1, 
                textAlign: 'center' 
            },
            headerTintColor: '#f4511e'
        }
    },
    Practice:Practice,
    LoginSreen:LoginSreen,
    GuildPage:GuildPage,
    WelcomePage: {
        screen: WelcomePage
    },
    BlueTest: {
        screen: BlueTest
    },
    // RepositoryDetail: {
    //     screen: RepositoryDetail
    // },
    // SearchPage: {
    //     screen: SearchPage
    // },
    // CustomKeyPage: {
    //     screen: CustomKeyPage
    // },
    // FavoritePage: {
    //     screen: FavoritePage
    // },
    // WebViewPage: {
    //     screen: WebViewPage
    // },
    // CustomTheme: {
    //     screen: CustomTheme
    // },
    // MyPage: {
    //     screen: MyPage
    // },
    // SortKeyPagePage: {
    //     screen: SortKeyPagePage
    // },
    // AboutMePage: {
    //     screen: AboutMePage
    // },
    // AboutPage: {
    //     screen: AboutPage
    // }
},{
    defaultNavigationOptions: {
         header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
         mode: 'card',
         headerMode: 'none',
    }
})
let Navaigator = createAppContainer(AppNavigator);
export default ()=> <Root><StyleProvider style={getTheme(platform)}><Navaigator/></StyleProvider></Root>;